<template>
    <div class='message'>
        <ul>
            <li v-for="(item,i) in list" :key="i" @click="$router.push('/messageDetail')">
                <div class="icon">
                    <img :src="item.img" alt="">
                </div>
                <div class="info">
                    <span>{{item.name}}</span>
                    <span style="font-size:12px;">{{item.text}}</span>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name:'message',//消息中心
    data() {
        return {
            list:[
                {
                    img:'	http://120.53.31.103:86/img/icon-course.d8a2c8d5.png',
                    name:'课程通知',
                    text:'暂无消息'
                },
                 {
                    img:'	http://120.53.31.103:86/img/icon-system.db56e51b.png',
                    name:'系统通知',
                    text:'暂无消息'
                },
                 {
                    img:'http://120.53.31.103:86/img/icon-order.41755990.png',
                    name:'订单通知',
                    text:'暂无消息'
                },
                 {
                    img:'	http://120.53.31.103:86/img/icon-exam.8a210fd7.png',
                    name:'考试通知',
                    text:'暂无消息'
                },
            ]
        };
    },
    mounted() {},
    methods: {},
    components:{}
};
</script>

<style lang='scss' scoped>
.message{
    width: 100%;
    height: 239px;
    ul{
        width: 100%;
        height: 231px;
        margin: 0 0 8px;
        padding: 10px 15px;
        li{
            width: 98%;
            height: 65px;
            line-height: 65px;
            display: flex;
            border-bottom: 1px solid #ccc;
            .icon{
                width: 16%;
                height: 100%;
                margin-right: 15px;
                padding: 8px 0;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .info{
                padding: 6px 0;
                color: #595959;
                display: flex;
                align-items: center;
                flex-direction: column;
                font-family: PingFangSC-Regular,PingFang SC;
                width: 100%;
                height: 100%;
                font-size: 15px;
                span{
                    width: 100%;
                    height: 20px;
                    line-height: 20px;
                    margin-bottom: 8px;
                    
                }
               
            }
        }
    }
}
</style>
